<!DOCTYPE HTML>
<html>
<head>
<#include "admin/common.html"/>
<style type="text/css">

.long{
	width: 150px!important;
}

.short{
	width: 50px!important;
}

.ali{
	color: red;
	font-weight: bolder;
}

</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

<#include "admin/header.html"/>
<#include "admin/menu.html"/>

    <div class="layui-body">
        <div style="padding: 15px">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>${i18n.get("menu.monitor")}</legend>
            </fieldset>

<!--            <input type="hidden" id="isInit" value="${isInit}">-->

            <div style="padding: 20px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <!-- 监控 -->
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                ${i18n.get("monitorStr.cpuRatio")}&nbsp;&nbsp;<span id="cpuCount" style="color: teal;"></span>
                            </div>

                            <div class="layui-card-body">
                                <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="cpu">
                                    <div class="layui-progress-bar layui-bg-green" lay-percent="46.43%"></div>
                                </div>
                            </div>

                            <div class="layui-card-header">
                                ${i18n.get("monitorStr.memUse")}&nbsp;&nbsp;<span id="memContent" style="color: teal;"></span>
                            </div>

                            <div class="layui-card-body">
                                <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="mem">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="21.88%"></div>
                                </div>
                            </div>

                            <div class="layui-card-header">
                                ${i18n.get("monitorStr.diskUse")}&nbsp;&nbsp;<span id="diskContent" style="color: teal;"></span>
                            </div>

                            <div class="layui-card-body">
                                <#list list as disk>
                                <span class="layui-breadcrumb"><a href="javacript:">${disk.path} (${disk.useSpace} / ${disk.totalSpace})</a></span>
                                <div class="layui-progress" lay-showpercent="true" style="margin-top: 20px;margin-bottom: 10px;">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="${disk.percent}"></div>
                                </div>
                                </#list>
                        </div>
                    </div>
                </div>

                <!-- 网速 -->
                <div class="layui-col-md6">
                    <div class="layui-card" id="netDiv" style="height: 500px;">
                        <pre id="editor"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>




<#include 'admin/script.html'/>
<script src="${ctx}/js/admin/monitor/index.js?v=${jsrandom}" type="text/javascript"></script>
</body>
</html>